@mixin shortcut($display,$direction,$justify,$align) {
  display: $display;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

//display
@each $i in flex, inline-flex {
  .lib-#{$i} {
    display: $i;
  }
}

//flex-direction
@each $i in row, row-reverse, column, column-reverse {
  .lib-flex-#{$i} {
    flex-direction: $i;
  }
}

//flex-wrap
@each $i in nowrap, wrap, wrap-reverse {
  .lib-flex-#{$i} {
    flex-wrap: $i;
  }
}

//flex-flow
@each $i in row, row-reverse, column, column-reverse {
  @each $j in nowrap, wrap, wrap-reverse {
    .lib-flex-#{$i}-#{$j} {
      flex-flow: $i $j;
    }
  }
}

//justify-content
@each $i in start, end {
  .lib-flex-main-#{$i} {
    justify-content: flex-#{$i};
  }
}

.lib-flex-main-center {
  justify-content: center;
}

@each $i in between, around {
  .lib-flex-main-#{$i} {
    justify-content: space-#{$i};
  }
}

//align-items
@each $i in start, end {
  .lib-flex-cross-#{$i} {
    align-items: flex-#{$i};
  }
}

@each $i in center, baseline, stretch {
  .lib-flex-cross-#{$i} {
    align-items: $i;
  }
}

//align-content
@each $i in start, end {
  .lib-flex-axis-#{$i} {
    justify-content: flex-#{$i};
  }
}

@each $i in center, stretch {
  .lib-flex-axis-#{$i} {
    justify-content: $i;
  }
}

@each $i in between, around {
  .lib-flex-axis-#{$i} {
    justify-content: space-#{$i};
  }
}

//shortcut
@each $h in flex, inline-flex {
  @each $i in row, column {
    @each $j in start, end {
      @each $k in start, end {
        @if ($j == $k) {
          .lib-#{$h}-#{$i}-#{$j} {
            @include shortcut($h, $i, flex-#{$j}, flex-#{$k});
          }
        } @else {
          .lib-#{$h}-#{$i}-#{$j}-#{$k} {
            @include shortcut($h, $i, flex-#{$j}, flex-#{$k});
          }
        }
      }
      @each $k in center, baseline {
        .lib-#{$h}-#{$i}-#{$j}-#{$k} {
          @include shortcut($h, $i, flex-#{$j}, $k);
        }
      }
      .lib-#{$h}-#{$i}-#{$j} {
        @include shortcut($h, $i, flex-#{$j}, stretch);
      }
    }
    @each $k in start, end {
      .lib-#{$h}-#{$i}-center-#{$k} {
        @include shortcut($h, $i, center, flex-#{$k});
      }
    }
    @each $k in baseline, stretch {
      .lib-#{$h}-#{$i}-center-#{$k} {
        @include shortcut($h, $i, center, #{$k});
      }
    }
    .lib-#{$h}-#{$i}-center {
      @include shortcut($h, $i, center, center);
    }
    @each $j in between, around {
      @each $k in start, end {
        .lib-#{$h}-#{$i}-#{$j}-#{$k} {
          @include shortcut($h, $i, space-#{$j}, flex-#{$k});
        }
      }
      @each $k in center, baseline {
        .lib-#{$h}-#{$i}-#{$j}-#{$k} {
          @include shortcut($h, $i, space-#{$j}, $k);
        }
      }
      .lib-#{$h}-#{$i}-#{$j} {
        @include shortcut($h, $i, flex-#{$j}, stretch);
      }
    }
  }
}

//order
@for $i from 0 through 12 {
  .lib-flex-order-#{$i} {
    order: $i;
  }
}

//flex-grow
@for $i from 0 through 12 {
  .lib-flex-grow-#{$i} {
    flex-grow: $i;
  }
}

//flex-shrink
@for $i from 0 through 12 {
  .lib-flex-shrink-#{$i} {
    flex-shrink: $i;
  }
}

//flex-basis
/*
 * flex-basis为固定值，不做支持
 */
//flex
@for $i from 0 through 12 {
  .lib-flex-#{$i} {
    flex: $i;
  }
}

@for $i from 0 through 12 {
  @for $j from 0 through 12 {
    .lib-flex-#{$i}-#{$j} {
      flex: $i $j;
    }
  }
}

//align-self
@each $i in start, end {
  .lib-flex-self-#{$i} {
    align-self: flex-#{$i};
  }
}

@each $i in auto, center, baseline, stretch {
  .lib-flex-self-#{$i} {
    align-self: #{$i};
  }
}